<template>
  <div id="panel">
    <h1>Cesium 运行信息</h1>
    <hr />
    <h3>摄像机位置: {{this.cameraPos[0]}}, {{this.cameraPos[1]}}</h3>
    <h3>摄像机离地高度: {{this.cameraPos[2]}} 米</h3>
    <h3>摄像机方位角: {{this.cameraHead}} 度</h3>
    <h3>摄像机仰角: {{-this.cameraPitch}} 度</h3>
    <!-- <h3>摄像机侧倾角: {{this.cameraRoll}} 度</h3> -->
  </div>
</template>

<script>
import Event from "../common/Event.js";

export default {
  data() {
    return {
      camera: null,
      cameraPos: [],
      cameraHead: 0,
      cameraPitch: [],
      cameraRoll: []
      //   direction: [],
    };
  },
  methods: {
    compInit() {
      let me = this;
      Event.$on("viewer-camera-changed", data => {
        me.camera = data;
        me.cameraPos = [
          ((data.positionCartographic.longitude / Math.PI) * 180).toFixed(4),
          ((data.positionCartographic.latitude / Math.PI) * 180).toFixed(4),
          data.positionCartographic.height.toFixed(4)
        ];
        me.cameraHead = ((data.heading / Math.PI) * 180).toFixed(4);
        me.cameraPitch = ((data.pitch / Math.PI) * 180).toFixed(4);
        me.cameraRoll = (data.roll / Math.PI * 180).toFixed(4)
        //   me.direction = data.direction
      });
    }
  },
  mounted() {
    Event.$on('ready', (data)=>{
        
    })
    this.compInit();
  }
};
</script>

<style>
#panel {
  position: absolute;
  top: 90px;
  left: 50px;
  width: 25vw;
  height: 35vh;
  background-color: rgba(255, 255, 255, 0.9);
  padding-left: 1em;
  padding-right: 1em;
  text-align: left;
}

#panel h3 {
  padding-left: 1.3em;
}

#panel h1 {
  padding-left: 0.5em;
}
</style>